<template>
	<view class="page">
		<fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
			<block slot="content">退款</block>
		</fu-custom>
		<view class="goods-wrap bg-white margin-bottom-sm">
			<view class="flex padding-tb-sm">
				<view class="img-200 overHidden">
					<fu-image :src="refundInfo.goods_thumb" mode="aspectFill"></fu-image>
				</view>
				<view class="goods-info margin-left-sm">
					<view>
						<view class="text-df text-333 text-cut-2 text-weight-500">{{ refundInfo.goods_name || '' }}
						</view>
						<!-- <view class="text-sm text-999 text-weight-400 margin-t-8">
							{{ refundInfo.sku_name || '' }}
						</view> -->
					</view>
					<view class="flex justify-between">
						<text class="text-df text-333">¥{{ refundInfo.shop_price || '' }}</text>
						<text class="text-df">x{{ num }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="after-item-wrap bg-white">
			<view class="after-item flex justify-between align-center" @click="toggleTab('selector')">
				<view class="after_left text-111 text-lg text-weight-400">
					退货数量
				</view>
				<view class="after_right text-bf  text-lg">
					<uni-number-box :value="refund_number" :min="min" :max="max" @change="setnumber" :step="1">
					</uni-number-box>
				</view>
			</view>
			<view class="after-item flex justify-between align-center" @click="toggleTab('reason')">
				<view class="after_left text-111 text-lg text-weight-400">
					{{ staicon[statindex].name }}{{ i18n['原因'] }}
				</view>
				<view class="after_right text-bf text-weight-400 text-lg">
					<text class="margin-right-sm"
						v-if="refundInfo.refund_reason && refundInfo.refund_reason[select_reason].reason">{{ refundInfo.refund_reason[select_reason].reason }}</text>
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="after-item money flex justify-between align-center solid-bottom">
				<view class="after_left text-111 text-lg text-weight-400">
					{{ i18n['退款金额'] }}:
				</view>
				<view class="after_right text-prices text-weight-500 text-lg">
					<text class="text-price">{{refundInfo.refund_money}}</text>
				</view>
			</view>

		</view>
		<view class="bg-white padding-lr-sm padding-bottom-sm">
			<view class="title text-lg text-111 text-weight-400">{{ i18n['退款说明'] }}</view>
			<view class="wen text-111">
				<textarea maxlength="200" class="text-df" value="" v-model="refund_content"
					placeholder="'请在此描述退款说明原因" placeholder-style="color:#bfbfbf" />
				<text
					class="tips text-sm text-weight-400 text-bf">{{refund_content.length>200?'200':refund_content.length}}/200</text>
			</view>
		</view>
		<!-- <view class="padding-b-60">
			<fu-upload col="4" max="3" @change="handleImageUpload" :defData="images"></fu-upload>
		</view> -->

		<view class="ben-btn submit-btn margin-lr radius-100" @click.stop="handleSubmit">{{ i18n['提交'] }}</view>
		<fu-notwork></fu-notwork>
		<view class="sex-wrap">
			<w-picker :visible.sync="visible" mode="selector" :value="staicon[statindex].name" default-type="name"
				themeColor="#FF6464" :default-props="defaultProps" :options="staicon"
				@confirm="onConfirm($event,'selector')" ref="selector">{{i18n['售后类型']}}</w-picker>
		</view>
		<w-picker v-if="refundInfo.refund_reason && refundInfo.refund_reason.length > 0" :visible.sync="visible"
			mode="selector" :value="refundInfo.refund_reason[select_reason].reason" default-type="reason"
			themeColor="#FF6464" :default-props="defaultProps1" :options="refundInfo.refund_reason"
			@confirm="onConfirm($event,'reason')" ref="reason">{{ staicon[statindex].name }}{{ i18n['原因'] }}</w-picker>
	</view>
</template>

<script>
	import {
		UploadImage
	} from '@/common/utils/index';
	import {
		UPLOAD_IMAGE_URL
	} from '@/common/config.js';
	import FuUpload from '../../components/fu-upload/fu-upload.vue';
	// @see 引入组件wPicker
	import wPicker from "../../components/w-picker/w-picker.vue";
	export default {
		components: {
			FuUpload,
			wPicker
		},
		data() {
			return {
				sku_id: '', // 商品规格
				imgWechatUrl: this.imgWechatUrl,
				min:1,
				max:6,
				order_sn: null, // 订单编号
				num: 0, // 商品数量
				images: [],
				states: [{
					name: global.i18n['已收到货'],
					id: 1
				}, {
					name: global.i18n['未收到货'],
					id: 2
				}], // 货物状态
				staicon: [{
					name: '退款',
					id: 1
				}], // 退款原因
				refund_number:1,//退货数量
				statindex: 0,
				defaultProps: {
					"label": "name",
					"value": "id"
				},
				defaultProps1: {
					"label": "reason",
					"value": "id"
				},
				refundInfo: '',
				select_reason: 0,
				images: [],
				refund_content: '', // 退款说明
				visible: false,
				express_price: 0,
				number:'',//
				isLoading: false, // 防连点
			};
		},
		onLoad(options) {
			this.setNavigationBarTitle(this.i18n['申请售后']);
			const {
				order_sn,
				goods_id,
				sku_id,
				num,
				status
			} = options;
			this.sku_id = sku_id;
			this.order_sn = order_sn;
			this.goods_id = goods_id;
			this.num = num;
			this.max=Number(num)
			this.refund_number=Number(num)
			switch (status) {
				case '2':
				case '3':
				case '4':
					this.staicon = [{
						name: this.i18n['退款(无需退货)'],
						id: 1
					}, {
						name: this.i18n['退货退款'],
						id: 2
					}];
					break;
			}
			this.getData();
		},
		methods: {
			/**
			 * @event
			 * @description 所在地的选择弹窗显示
			 */
			toggleTab(ref) {
				this.$refs[ref].show();
			},
			/**
			 * @event
			 * @description 所在地选择事件
			 * @param {Object} result - 用户所在地弹窗选择的值
			 */
			onConfirm(result, type) {
				console.log(result, type);

				if (type == 'selector') {
					let index = this.staicon.findIndex(item => item.id == result.obj.id);
					this.statindex = index;
				}
				if (type == 'reason') {
					let index = this.refundInfo.refund_reason.findIndex(item => item.id == result.obj.id);
					this.select_reason = index;
				}

			},
			setnumber(e){
				console.log(e,'========');
				this.refund_number = e;
				this.getData()
			},
			//获取售后信息
			getData() {
				let data = {
					order_sn: this.order_sn,
					goods_id: this.goods_id,
					sku_id: 0,
					num: this.refund_number
				};
				this.$api.post(global.apiUrls.postGetRefundMoney, data).then(res => {
					if (res.data.code == 1) {
						this.refundInfo = res.data.data;
						// this.max=Number(res.data.data.num)
						this.refund_number= Number(res.data.data.num)
					}else{
						this.$message.info(res.data.msg);
						setTimeout(()=>{
							uni.navigateBack()
						},500)
						
					}
				});
			},
			handleImageUpload(e) {
				this.images = e;
			},
			// 提交
			handleSubmit() {
				if (this.isLoading) return;
				uni.hideKeyboard();
				if (!this.refund_content.trim()) return this.$message.info(this.i18n['请输入退款说明']);
				let arr = '';
				if (this.images.length != 0) {
					arr = this.images.join(',');
				}
				let data = {
					order_sn: this.order_sn,
					refund_reason: this.refundInfo.refund_reason[this.select_reason].reason,
					refund_content: this.refund_content,
					goods_id: this.goods_id,
					num: this.refund_number,
				};
				if (arr) {
					data.refund_picture = arr;
				}
				this.isLoading = true;
				this.$api.post('/v1/63de1a6f953e4', data).then(res => {
						if (res.data.code == 1) {
							this.$message.info("退款申请已提交");
							// 通知列表页面更新数据
							uni.$emit('onPageUpdata', {
								type: 6, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单，5: 评论， 6: 提交售后
							});
							// 通知详情页面更新数据
							uni.$emit('onOrederDetailPageUpdata');
							setTimeout(() => {
								this.isLoading = false;
								uni.navigateBack();
							}, 800);
						} else {
							this.isLoading = false;
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						this.isLoading = false;
						console.log('err: ' + JSON.stringify(err));
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		padding-bottom: 100rpx;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.goods-wrap {
		padding: 24rpx 24rpx 34rpx;
	}

	.margin-t-8 {
		margin-top: 8rpx;
	}

	.padding-b-60 {
		padding-bottom: 60rpx;
	}

	.text-111 {
		color: #111111;
	}

	.text-bf {
		color: #bfbfbf;
	}

	.line-20 {
		height: 20rpx;
		width: 100%;
		background: #F8F8F8;
	}

	.after-item-wrap {
		padding: 16rpx 24rpx 32rpx;

		.after-item {
			height: 78rpx;

			&.money {
				position: relative;
				height: 122rpx;
				padding-bottom: 44rpx;

				.tips {
					position: absolute;
					left: 0;
					bottom: 20rpx;
				}
			}

		}
	}


	.submit-btn {
		position: fixed;
		bottom: 40rpx;
		bottom: calc(40rpx + constant(safe-area-inset-bottom));
		bottom: calc(40rpx + env(safe-area-inset-bottom));
		left: 0rpx;
		width: 92%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		background: $bgtheme;
		font-size: 32rpx;
		font-weight: 500;
	}

	.wen {
		width: 702rpx;
		height: 272rpx;
		// border: 1rpx solid #e8e8e8;
		margin-top: 20rpx;
		padding: 24rpx;
		font-size: 28rpx;
		font-weight: 400;
		background: #F8F8F8;
		;
		border-radius: 16rpx;
		position: relative;

		textarea {
			width: 100%;
			height: 85%;
		}

		.tips {
			position: absolute;
			right: 24rpx;
			bottom: 24rpx;
		}
	}

	.img-200 {
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx;
	}

	.goods-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		overflow: hidden;

		&>view {
			width: 100%;
		}
	}

	/deep/ .sex-wrap .w-picker-view {
		height: 228rpx;
	}

	/deep/ .w-picker-item {
		position: relative;

		// height: 108rpx!important;
		// line-height: 108rpx!important;
		&::before {
			content: '';
			width: 100%;
			height: 1px;
			background: #eee;
			transform: scaleY(0.5);
			position: absolute;
			top: 0;
			left: 0;
		}

		&::after {
			content: '';
			width: 100%;
			height: 1px;
			background: #eee;
			transform: scaleY(0.5);
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
</style>
